<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
  <meta charset="UTF-8">
  <meta name="Author" content="haley">
  <meta name="Keywords" content="前端最常用的UI插件">
  <meta name="Description" content="最常用的UI插件">
  <script crossorigin="anonymous" integrity="sha384-6ePHh72Rl3hKio4HiJ841psfsRJveeS+aLoaEf3BWfS+gTF0XdAqku2ka8VddikM" src="https://lib.baomitu.com/jquery/1.11.3/jquery.min.js"></script>
  <link crossorigin="anonymous" integrity="sha384-pdapHxIh7EYuwy6K7iE41uXVxGCXY0sAjBzaElYGJUrzwodck3Lx6IE2lA0rFREo" href="https://lib.baomitu.com/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <link href="../../css/page.css" rel="stylesheet">
  <script crossorigin="anonymous" integrity="sha384-pPttEvTHTuUJ9L2kCoMnNqCRcaMPMVMsWVO+RLaaaYDmfSP5//dP6eKRusbPcqhZ" src="https://lib.baomitu.com/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script crossorigin="anonymous" integrity="sha384-8t+aLluUVnn5SPPG/NbeZCH6TWIvaXIm/gDbutRvtEeElzxxWaZN+G/ZIEdI/f+y" src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
  <script src="../../js/page.js"></script>
  <script src="../../js/changeTitle.js"></script>
  <link href="../../imgs/favicon.ico" rel="shortcut icon">
  <script src="../../js/goToHome.js"></script>
  <title></title>
  <script>
    var data={
      title:'前端常用的css动画',
      content:{
        intro:{
          list:[
            {
              title:'使用说明：',
              className:'bs-callout-info',
              list:[
                {title:'基础配置：',content:'无'}
                ,{title:'需要的代码：',content:'直接复制“核心代码”即可使用'}
                ,{title:'如何使用：',content:'直接复制“核心代码”'}
              ]
            }

          ]
        }
      }
    };
  </script>
  <style>

  </style>
</head>
<body>
<div id="page">
  <div class="container">
    <h3 class="text-center">{{title}}</h3>
    <div class="bs-callout" :class="item.className" v-for="item in content.intro.list">
      <h4>{{item.title}}</h4>
      <ul>
        <li v-for="item2 in item.list"><b>{{item2.title}}</b>{{item2.content}}</li>
      </ul>
    </div>
  </div>
  <script>
    var page = new Vue({
      el: '#page',
      data: data
    });
  </script>
</div>

<div class="container">
  <section class="panel panel-info">
    <div class="panel-heading">css动画之transition过渡动画，transition可以控制background transform等各种属性</div>
    <div class="panel-body">
      <div class="row">
        <div class="col-sm-6">
          <!--核心代码 s-->
          <h4>双边过渡动画（hover下面的方块查看效果） - trasition<em>加到容器上</em></h4>
          <div id="box1">BOX1，hover看效果</div>
          <style>
            #box1 {
              height: 100px;
              width: 100px;
              background: green;
              color:#fff;
              transition: background 2s ease,transform 2s ease-in 1s;
            }
            #box1:hover{transform:rotate(180deg) scale(.5,.5);background:red;}
          </style>
          <!--核心代码 e-->
        </div>
        <div class="col-sm-6">
          <!--核心代码 s-->
          <h4>单边过渡动画（hover下面的方块查看效果） - transition加到<em>容器的hover上</em></h4>
          <div id="box2">BOX2，hover看效果</div>
          <style>
            #box2{
              height: 100px;
              width: 100px;
              color:#fff;
              background: blue;
            }
            #box2:hover{
              transform: rotate(180deg) scale(.5, .5);
              background: red;
              transition: background 2s ease, transform 2s ease-in 1s;}
          </style>
          <!--核心代码 e-->
        </div>
      </div>
    </div>
    <div class="panel-footer">
      <p><b>transition:</b> transition-property（属性名、all、none，多个是用逗号隔开）  transition-duration（执行时间）  transition-timing-function（动画函数）  transition-delay（延时多久执行）;</p>
      <p>固定套路一：<em>transition:background 2s ease 0.3s;</em></p>
      <p>固定套路二：<em>transition:background 2s ease 0.3s,color 1s ease 2.3s;</em></p>
      <p><a href="https://www.cnblogs.com/shenfangfang/p/5713564.html">以上实例转自https://www.cnblogs.com/shenfangfang/p/5713564.html</a></p>
    </div>
  </section>
  <section class="panel panel-info">
    <div class="panel-heading">css动画之animation动画，animation可以控制</div>
    <div class="panel-body">
      <div class="row">
        <div class="col-sm-12">
          <!--核心代码 s-->
          <p>animation属性结合@ keyframes使用， animation中的animation-name需要设置成@keyframes的name一致。</p>
          <div class="box">hover看效果</div>
          <style>
            .box{height:100px;width:100px;border:15px solid black;
              animation: changebox 10s ease-in-out 3 alternate paused;
            }
            .box:hover{
              animation-play-state: running;
            }
            @keyframes changebox {
              10% {  background:red;  }
              50% {  width:80px;  }
              70% {  border:15px solid yellow;  }
              100% {  width:120px;  height:180px;  }
            }
          </style>
          <!--核心代码 e-->
        </div>
      </div>
      <div>
        <style>
          .fl{
            float: left;
          }
          .boxBox{
            padding:30px;
            overflow: hidden;
          }
          .box0{
            height:50px;width:50px;background-color: #00a0e9;
            margin-bottom:30px;;
          }
          .box2{
            animation: rotate360 2s linear 0s infinite;
          }
          .box3{
            animation: rotate360 2s linear 0s infinite  alternate;
          }
          .box2:hover{

          }
          @keyframes rotate360 {
            0% {  transform: rotate(0deg)}
            100% { transform: rotate(360deg) }
          }
        </style>
        <div class="boxBox">
          <div class="box0 box2">box2</div>
          <p><em>animation: rotate360 2s linear 0s infinite;</em></p>
          <div class="box0 box3">box3</div>
          <p><em>animation: rotate360 2s linear 0s infinite  alternate;</em></p>
        </div>
      </div>
    </div>
    <div class="panel-footer">
      <p><pre>
<b>animation</b>{
   animation-name(keyframes的名字)
   animation-duration（动画持续时间）
   animatino-timing-function（动画函数）
   animation-delay（等待时间）
   animation-iteration-count（播放次数；1、infinite）
   animation-direction（播放方向：normal 向前 / alternate 动画播放在第偶数次向前播放，第奇数次向反方向播放）
   animtion-play-state（播放状态：running将暂停的动画继续播放 / paused，暂停播放）
   animation-fill-mode(控制动画结束后元素的样式:none 默认，回到动画没开始时的状态 / forwards 动画结束后动画停留在结束状态 / backwords 动画回到第一帧的状态  / both 根据animation-direction轮流应用forwards和backwards规则 )
}</pre>

      <p><a href="https://www.cnblogs.com/shenfangfang/p/5713564.html">以上实例转自https://www.cnblogs.com/shenfangfang/p/5713564.html</a></p>
    </div>
  </section>
  <section class="panel panel-warning">
    <div class="panel-heading">transform(变形)是CSS3中的元素的属性，transform的属性值主要包括旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix</div>
    <div class="panel-body">
      <div class="row">
        <div class="col-sm-12">
          <p>1、transform:rotate(30<b>deg</b>),2D旋转，正值为顺时针旋转，负值为逆时针旋转，默认旋转基点是中心点，也可以通过transform-origin（X,Y）改变基点。</p>
          <p>2、transform:skew(30deg,10deg),注意，这里的X轴和Y轴与我们平时认为的坐标系的XY轴正好相反；且X轴正值是逆时针变形，而Y轴正值是顺时针变形。基点默认为中心点。另外还有skewX、skewY，分别用来设置单一方向上的扭曲。可以通过transform-origin（X,Y）改变基点</p>
          <p>3、transform：scale（2,1.5），表示在水平方向（X轴）缩放2倍，在垂直方向（Y轴）缩放1.5倍。基本默认为中心点。这里的X、Y轴指的是像坐标系一样的X、Y轴，与transform:skew（X,Y）的XY轴不同。 另外同样有scaleX(&lt;number>) 、scaleY(&lt;number>)用来分别设置单一方向上的缩放。可以通过transform-origin（X,Y）改变基点。</p>
          <p>4、transform：translate（100px，20px），表示在水平方向上移动100px；在垂直方向上移动20px，比较好理解，另外也同样有translateX、translateY值分别设置单一方向上的位移，可以通过transform-origin（X,Y）改变基点。</p>
        </div>
      </div>
    </div>
    <div class="panel-footer">
      <p><b>transform-origin</b>变形基准点，属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。</p>
      <p>
        transition 兼容性：
<pre>
  -webkit-transition: prop time;
  -moz-transition: prop time;
  -ms-transition: prop time;
  -o-transition: prop time;
  transition: prop time;
</pre>
      </p>
      <p>
        transform 兼容性：
<pre>
  -webkit-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px);
  -moz-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px);
  -o-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px);
  -ms-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px);
  transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px);
</pre>
      </p>
      <p>
        transform-origin 兼容性：
<pre>
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
</pre>
      </p>
      <p>animation 兼容性:
<pre>
  animation: slideInDown 1s ease .2s 5 alternate;
  -webkit-animation: slideInDown 1s ease .2s 5 alternate;
  -ms-animation: slideInDown 1s ease .2s 5 alternate;
  -o-animation: slideInDown 1s ease .2s 5 alternate;
  -moz-animation: slideInDown 1s ease .2s 5 alternate;
</pre>
      </p>
      <p>keyframes 兼容性:
<pre>
@-moz-keyframes jump /* Firefox */
{
	0% {
		-webkit-transform: translateY(-2px);
		-moz-transform: translateY(-2px);
		-o-transform: translateY(-2px);
		-ms-transform: translateY(-2px);
		transform: translateY(-2px);
	}
	100% {
		-webkit-transform: translateY(6px);
		-moz-transform: translateY(6px);
		-o-transform: translateY(6px);
		-ms-transform: translateY(6px);
		transform: translateY(6px);
	}
}

@-webkit-keyframes jump /* Safari 和 Chrome */
{
	0% {
		-webkit-transform: translateY(-2px);
		-moz-transform: translateY(-2px);
		-o-transform: translateY(-2px);
		-ms-transform: translateY(-2px);
		transform: translateY(-2px);
	}
	100% {
		-webkit-transform: translateY(6px);
		-moz-transform: translateY(6px);
		-o-transform: translateY(6px);
		-ms-transform: translateY(6px);
		transform: translateY(6px);
	}
}

@-o-keyframes jump /* Opera */
{
	0% {
		-webkit-transform: translateY(-2px);
		-moz-transform: translateY(-2px);
		-o-transform: translateY(-2px);
		-ms-transform: translateY(-2px);
		transform: translateY(-2px);
	}
	100% {
		-webkit-transform: translateY(6px);
		-moz-transform: translateY(6px);
		-o-transform: translateY(6px);
		-ms-transform: translateY(6px);
		transform: translateY(6px);
	}
}
</pre>
      </p>
        <p><a href="http://www.cnblogs.com/shenfangfang/p/5714687.html">以上实例转自http://www.cnblogs.com/shenfangfang/p/5714687.html</a></p>
    </div>
  </section>
  <section class="panel panel-warning">
    <div class="panel-heading">常见的缓动函数</div>
    <div class="panel-body">
      <div class="row">
        <div class="col-sm-12">
          <p>Linear 匀速运动。对应于贝塞尔曲线：cubic-bezier(0.0, 0.0, 1.0, 1.0)</p>
          <p>Ease 慢速开始，然后变快，然后慢速结束。对应于贝塞尔曲线：cubic-bezier(0.25, 0.1, 0.25, 1.0)</p>
          <p>Ease-out 先快后慢。对应于贝塞尔曲线：cubic-bezier(0, 0, 0.58, 1.0)</p>
          <p>Ease-in 先慢后快。对应于贝塞尔曲线：cubic-bezier(0.42, 0, 1.0, 1.0)</p>
          <p>Ease-in-out 以慢速开始和结束。对应于贝塞尔曲线：cubic-bezier(0.42, 0, 0.58, 1.0)</p>
          <p>cubic-bezier(0.22, 0.61, 0.36, 1) 贝塞尔曲线（cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]） <a href="https://blog.csdn.net/wjnf012/article/details/78795573" target="_blank">参考</a></p>
        </div>
      </div>
    </div>
    <div class="panel-footer">
      <p><a href="https://www.jianshu.com/p/9b6824f7af51">参考网站 https://www.jianshu.com/p/9b6824f7af51</a></p>
    </div>
  </section>
</div>

</body>

</html>
